<template>
  <div class="bdetail-banner">
    <div class="banner" @click="handleBannerClick">
      <img :src="bannerImg" :alt="sightName">
      <div class="info">
        <h1 class="title">{{ sightName }}</h1>
        <span class="num"><span class="iconfont">&#xe635;</span>{{ gallaryImgs.length }}</span>
      </div>
    </div>
    <FadeAnimation>
      <CommonGallery :imgList="gallaryImgs" v-show="showGallery" @close="handleGalleryClose" />
    </FadeAnimation>
  </div>
</template>

<script>
import CommonGallery from 'common/gallery/Gallery';
import FadeAnimation from 'common/fade/FadeAnimation';

export default {
  name: 'detail-banner',
  components: {
    CommonGallery, FadeAnimation
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  data() {
    return {
      showGallery: false,
    }
  },
  methods: {
    handleBannerClick() {
      this.showGallery = true;
    },
    handleGalleryClose() {
      this.showGallery = false;
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner
  position relative
  height 0
  padding-bottom 55%
  overflow hidden
  img
    width 100%
  .info
    position absolute
    left 0
    bottom 0
    width 100%
    padding 0 .2rem
    box-sizing border-box
    display flex
    justify-content space-between
    align-items center
    line-height .6rem
    color #fff
    background-image linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .8));
    .title
      flex 1
      font-size .32rem
    .num 
      padding 0 .4rem
      height .32rem
      line-height .32rem
      border-radius .2rem
      background rgba(0, 0, 0, .8)
      font-size .24rem
      .iconfont
        font-size .24rem
</style>